<!-- 赛事详情 -->
<template>
	<div id="event-details">
		<div id="event-de-title">
			<!-- 赛事详情 -->
		</div>
    <el-button class="absolute z-50"
     icon="el-icon-back"
     title="返回主页"
     @click="$router.push({name:'competition'})" />
    
		<div class="flex text-2xl justify-center relative">
			<span class="edn-name edn-2">{{thisCptt.name}}</span>
      <div class="select-none z-10 absolute top-0 right-0">
        <div class="hw-box z-20 rounded-full"
          style="border: 10px double #fafa;
          color: #fafa;
          padding:calc(50% - 10px) 0"
        >
          <span class="p-1 transform -translate-y-2/4 block rotate-45">
          {{CodeToType[thisCptt.type]}}赛
          </span>
        </div>
      </div>
    </div>
		<div id="event-de-main">
			<div id="edm-introduction">
				<div class="edm-title">
					<span>活动介绍</span>
					<hr >
				</div>
				<div
				class="edm-content"
				v-html="thisCptt.info"
				style="text-indent:1em"
				>
				</div>
			</div>
			<div id="edm-time">
				<div class="edm-title">
					<span>活动时间</span>
					<hr >
				</div>
				<div style="text-align: center;">
					<span>即日起-</span>
					<span>{{endtime.getMonth()+1 + "月" + endtime.getDate() + "日"}}</span>
				</div>
			</div>
			<div id="edm-requirements">
				<div class="edm-title">
					<span>报名要求</span>
					<hr >
				</div>
				<div class="edm-content">
					<p class="eng-font">you only need to</p>
					
					<span v-for="i in 3">
						<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
						<span>{{new Array(40).join("☹")}}</span>
						<br>
					</span>
				</div>
			</div>
			<div id="edm-apply">
				<div class="edm-title">
					<span>报名方式</span>
					<hr >
				</div>
				<div class="edm-content">
				<van-notice-bar
				left-icon="volume-o"
				:scrollable="false"
				color="#268cff"
				style="background-color:#FAFAFA;"
				v-if="applayName.length!=0"
				>
				  <van-swipe
				    vertical
				    class="notice-swipe"
				    :autoplay="2000"
				    :show-indicators="false"
				  >
				    <van-swipe-item v-for="i in applayName">{{i}}已报名</van-swipe-item>
				  </van-swipe>
				</van-notice-bar>
					<p class="ch-font">请点击下方报名按钮，填写基本信息进行报名。核实信息无误后将报名成功</p>
					<div class="edm-apply-btn">
            <p v-if="cptype && isApplay">
              <template v-for="item in isApplay">
                <template v-if="item">
                  <p>{{item.name}}</p>
                </template>
                <template v-else>
                  <p>空位</p>
                </template>
              </template>
            </p>
            <button
              @click="isApplay?cancel():apply()"
              :style="{'background-color':isApplay?'#a3a3a3':'#26A2FF'}"
            >
            {{isApplay?'取消报名':'点击报名'}}
            </button>
					</div>
					<span class="ch-font">如有其他问题请联系:</span>
					<a href="mqqwpa://im/chat?chat_type=wpa&uin=821783496&version=1">QQ:821783496</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Toast } from 'vant'
import { Dialog } from 'vant';
import { mapGetters,mapActions } from 'vuex'
import { timeSleep } from '@/utils/functions'
import { 
  getEvent,
  getApplay,
  applayCptt,
  getmygroup,
  getIsApplay,
 } from '@/api/cpttApis'
import { CodeToType } from '@/conf'
export default{
	name:'EventDetails',
	data(){
		return{
      CodeToType:Object.freeze(CodeToType),
			thisCptt:{name:"loading"},
			applayName:[],
			isApplay:false,
		}
	},
  props:['id'],
	async created() {
    console.log("created")
		Toast.loading({
		  message: '加载中...',
		  forbidClick: true,
		  loadingType: 'spinner',
		  duration:0,
		})
    await timeSleep(1000)
    const { id } = this
    const { cptt } = await getEvent({id})
    this.thisCptt = cptt
    const { applays } = await getApplay({id})
    let isApplay = applays.map(e=>e.u_id).includes(this.$store.getters.uid)
    if(cptt.type%10 && isApplay){
      const {groups} = await getmygroup({id})
      isApplay = [groups[0],groups[1],groups[2]]
    }
    console.log({isApplay})
    this.isApplay = isApplay
    Toast.clear(true)
	},
	methods:{
		async apply(){
      console.log(this.cptype)
      const { cptype,thisCptt:{id:cpid} } = this
      console.log({cptype,cpid})
      if(cptype){//组队
        await this.zudui(cpid)
      }else{//个人
        await applayCptt({cptype,cpid})
        this.isApplay = true
        this.$message.success("报名成功")
      }
		},
    async cancel(){
      this.$message.warning("没写")
    },
    async zudui(cpid){
      await this.$prompt('请输入组队码','报名比赛', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d{8}$/,
        inputErrorMessage: '组队码只能是八位数字'
      }).then(async ({ value:keycode }) => {
        const { groups } = await getIsApplay({cpid,keycode})
        if(!groups.length) await this.mackGroup(cpid,keycode)
        else await this.addGroup(cpid,keycode,groups)
        console.log({groups})
        // this.isApplay = [groups[0],groups[1],groups[2]]
        this.$message.success("报名成功")
      }).catch(e => {
        console.log(e)
      })
    },
    async mackGroup(cpid,keycode){
      await this.$confirm(`未找到队伍,自己创建?[${keycode}]`,'创建队伍', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async()=> {
        await applayCptt({cptype:true,cpid,make:true,keycode})
      })
    },
    async addGroup(cpid,keycode,groups){
      console.log({groups})
      await this.$confirm(`加入队伍\n${groups.map(e=>e.name).join(",")}`,'加入队伍',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async()=> {
        await applayCptt({cptype:true,cpid,make:false,keycode})
      })
    }
	},
	computed:{
		endtime(){
      const { overtime } = this.thisCptt
			return new Date(overtime)
		},
    cptype(){
      const { type } = this.thisCptt
      return type%10 //0是个人 1是组队
    }
	}
}
</script>

<style lang="scss" scoped>
	#event-details{
		// position: absolute;//title需要
		overflow-y: scroll;
		#event-de-title{
			font-size: 30px;
			height:15px;
		}
		#event-de-main{
			margin-top: 30px;
			margin-bottom: 70px;
			// height: 100%;
			#edm-introduction,
			#edm-time,
			#edm-requirements,
			#edm-apply
			{
				display: flex;
				flex-flow: column nowrap;
				// justify-content: center;
				align-items: center;
				margin-top: 1.875rem;
				hr,div{
					width: 80%;
				}
				.edm-content{ //活动介绍-内容
					margin-top: 1.25rem;
					margin-bottom: 1.25rem;
					box-sizing: border-box;
					min-height: 5.75rem;
					padding: 10px;
					border: solid 3px #26A2FF;
					// border-right: none;
					box-shadow: 5px 5px 5px #888888;
				}
				button{
					border: none;
					color: white;
					width: 40%;
					height: 40px;
					-webkit-clip-path: polygon(7% 0, 93% 0, 100% 23%, 100% 75%, 93% 100%, 6% 100%, 0 73%, 0 28%);
					clip-path: polygon(7% 0, 93% 0, 100% 23%, 100% 75%, 93% 100%, 6% 100%, 0 73%, 0 28%);
				}
			}
			.edm-title{ //活动介绍
				text-align: center;
				span{
					font-size: 1.25rem;
					color:#ffffff;
					text-shadow: 1px 1px #26A2FF,
								 -1px -1px #26A2FF, 
								 1px -1px #26A2FF, 
								 -1px 1px #26A2FF; 
				}
				hr{
					height: 0.125rem;
					border: none;
					background-color: #26A2FF;
				}
			}
			.edm-apply-btn{
				margin-top: 20px;
				text-align: center;
				width: 100% !important;
				margin-bottom: 20px;
			}
			.notice-swipe {
			  height: 40px;
			  line-height: 40px;
			}
			.eng-font{
				font-family: 'Dancing Script', cursive;
				font-size: 1.55rem;
				margin:0px 0px 5px 0px;
				color: #FFFFFF;
				text-shadow: 1px 1px #26A2FF,
							 -1px -1px #26A2FF, 
							 1px -1px #26A2FF, 
							 -1px 1px #26A2FF;
			}
			.ch-font{
				font-size: 1rem;
				color: #268cff;
				margin: 0;
			}
		}
	}
</style>
